// ********************************************     第三屏   ***********************************************
// 三个点击按钮
(function () {
  let but1 = document.querySelector(".buttons .but1");
  let but2 = document.querySelector(".buttons .but2");
  let but3 = document.querySelector(".buttons .but3");
  let but4 = document.querySelector(".buttons .but4");

  but1.addEventListener("click", function () {
    window.location.href = "./index.html";
    // $(mainbox2).hide();
    // $(mainbox2).hide();
    // $(mainbox).show();
  });
  but2.addEventListener("click", function () {
    window.location.href = "./屏幕2.html";
    // location.reload();
    // $(mainbox).hide();
    // $(mainbox2).show();
    // $("<li><li>");
  });
  but3.addEventListener("click", function () {
    window.location.href = "./屏幕3.html";
  });
  but4.addEventListener("click", function () {
    window.location.href = "./屏幕4.html";
  });
})();
// // 数字模块3
// (function () {
//   // 市场需求人数
//   let need = document.querySelector(".no-hd").querySelectorAll("li")[0];
//   // 市场供应人数
//   let supply = document.querySelector(".no-hd").querySelectorAll("li")[1];
//   function getRandomInt(min, max) {
//     min = Math.ceil(min);
//     max = Math.floor(max);
//     return Math.floor(Math.random() * (max - min + 1)) + min;
//   }

//   function needSum() {
//     need.innerHTML = parseInt(need.innerHTML) + getRandomInt(1, 10);
//     // ***************

//     localStorage.setItem("lastname", need.innerHTML);
//     // Retrieve
//     need.innerHTML = localStorage.getItem("lastname");
//     // console.log(need.value);

//     // *************
//   }
//   function supplySum() {
//     supply.innerHTML = parseInt(supply.innerHTML) + getRandomInt(1, 10);
//   }
//   setInterval(needSum, 1500);
//   setInterval(supplySum, 2000);
// })();

// 图一
(function () {
  let maxPay = [];
  let minPay = [];
  let post = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/MaxMinPay",
    async: true,
    success: function (datas) {
      for (let i = 0; i < 5; i++) {
        maxPay.push(datas[i].maxPay);
        minPay.push(datas[i].minPay);
        post.push(datas[i].post);
      }

      let myCharts = echarts.init(document.querySelector(".bar5 .chart"));
      let data = [
        {
          product: post[0],
          最高薪资: maxPay[0],
          最低薪资: minPay[0],
        },
        {
          product: post[1],
          最高薪资: maxPay[1],
          最低薪资: minPay[1],
        },
        {
          product: post[2],
          最高薪资: maxPay[2],
          最低薪资: minPay[2],
        },
        {
          product: post[3],
          最高薪资: maxPay[3],
          最低薪资: minPay[3],
        },
        {
          product: post[4],
          最高薪资: maxPay[4],
          最低薪资: minPay[4],
        },
      ];
      let option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          textStyle: {
            color: "white",
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            let name = params[0].name;
            let info = [];
            params.forEach((element) => {
              info.push({
                seriesName: element.seriesName,
                value: element.value,
                marker: element.marker,
              });
            });
            return `${name}</br>${info[1].marker}${info[0].seriesName}:${
              info[0].value + info[1].value
            }</br>${info[3].marker}${info[2].seriesName}:${
              info[2].value + info[3].value
            }`;
          },
        },
        grid: {
          left: "3%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        legend: {
          top: "10",
          textStyle: {
            color: "#39a5e5",
            fontSize: "12",
          },
        },
        xAxis: {
          type: "category",
          axisLabel: {
            // 文字样式
            color: "#5798ea",
            show: true,
          },
          data: data.map((element) => {
            return element.product;
          }),
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#5798ea",
          },
          splitLine: {
            //分隔线颜色
            lineStyle: {
              color: ["#162b5f"],
            },
          },
        },
        series: [
          {
            name: "最高薪资",
            type: "bar",
            stack: "this",
            barWidth: 30,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#44f0ff",
                },
                {
                  offset: 1,
                  color: "#3487da",
                },
              ]),
            },
            animationDelay: 0, //动画延迟时间
            animationDuration: 0, //动画时长
            animationDurationUpdate: 0,
          },
          {
            name: "",
            type: "bar",
            stack: "this",
            barWidth: 30,
            itemStyle: {
              color: "#44f0ff",
              opacity: 0.5,
            },
            animationDelay: 0, //动画延迟时间
            animationDuration: 0, //动画时长
            animationDurationUpdate: 0,
          },
          {
            name: "最低薪资",
            type: "bar",
            stack: "last",
            barWidth: 30,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#fb387e",
                },
                {
                  offset: 1,
                  color: "#3586da",
                },
              ]),
            },
            animationDelay: 0, //动画延迟时间
            animationDuration: 0, //动画时长
            animationDurationUpdate: 0,
          },
          {
            name: "",
            type: "bar",
            stack: "last",
            barWidth: 30,
            itemStyle: {
              color: "#fb387e",
              opacity: 0.5,
            },
            animationDelay: 0, //动画延迟时间
            animationDuration: 0, //动画时长
            animationDurationUpdate: 0,
          },
        ],
      };

      riseAnimation(data, myCharts, option, 5, 50);

      function riseAnimation(data, chart, option, time, speed) {
        let thisYearData = {
          norm: data.map((e) => {
            return e["最高薪资"];
          }),
          data1: new Array(5).fill(0),
          data2: [],
        };
        let lastYearData = {
          norm: data.map((e) => {
            return e["最低薪资"];
          }),
          data1: new Array(5).fill(0),
          data2: [],
        };
        chart.myOption = option;
        chart.thisYearData = thisYearData;
        chart.lastYearData = lastYearData;

        function formData(data) {
          let norm = data.norm;
          let data1 = data.data1;
          let data2 = data.data2;
          data2 = norm.map((e, index) => {
            let item = e / ((time * 1000) / speed);
            data1[index] += item;
            if (data1[index] >= e) {
              data1[index] = 0;
            }
            return e - data1[index];
          });
          return [data1, data2];
        }
        setInterval(
          function () {
            let thisYear = formData(this.thisYearData);
            let lastYear = formData(this.lastYearData);
            this.myOption.series[0].data = thisYear[0];
            this.myOption.series[1].data = thisYear[1];
            this.myOption.series[2].data = lastYear[0];
            this.myOption.series[3].data = lastYear[1];
            this.setOption(this.myOption);
          }.bind(chart),
          speed
        );
        myCharts.setOption(option);
        window.addEventListener("resize", function () {
          myCharts.resize();
        });
      }
    },
  });
})();
// 图二
(function () {
  let myCharts = echarts.init(document.querySelector(".bar6 .chart"));
  let colorList = [
    "#CF4645",
    "#B580B2",
    "#29008A",
    "#146A90",
    "#8956FF",
    "#70C9A8",
    "#bfbfbf",
    "#595959",
    "#40a9ff",
    "#1890ff",
    "#ffd666",
    "#ffc53d",
    "#ffc53d",
    "#ffc069",
    "#ffa940",
    "#fa8c16",
    "#eccbd9",
    "#ffadad",
    "#ff6392",
    "#ffc09f",
    "#ffcb77",
    "#ffe066",
    "#ffd53e",
    "#ffda3d",
    "#adf7b6",
    "#a0e8af",
    "#80ed99",
    "#07beb8",
    "#17c3b2",
    "#48cae4",
    "#97d2fb",
    "#83bcff",
    "#91e5f6",
    "#9381ff",
  ];
  let colorListLen = colorList.length;
  let fontSizeList = [
    12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16, 16.5, 17, 17.5, 18, 18.5, 19,
    19.5, 20, 20.5, 21, 22, 23, 24,
  ];
  let fontSizeListLen = fontSizeList.length;
  let customLabel = {
    color: colorList[Math.floor(Math.random() * colorListLen)],
    fontSize: fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
  };
  let bgColor = "#fffcf9";
  let canDraggable = false;
  let option = {
    color: ["#37A2DA", "#32C5E9", "#67E0E3"],

    itemStyle: {
      color: bgColor,
    },
    series: [
      {
        type: "graph",

        layout: "force",
        force: {
          repulsion: 80,
          edgeLength: 10,
        },
        roam: "scale",
        // symbol: '',
        // symbolSize: 0,
        label: {
          show: true,
          color: "auto",
          fontSize: 14,
        },
        data: [
          {
            name: "Java",
            value: 2,
            draggable: canDraggable,
            itemStyle: {
              color: bgColor,
            },
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "Zookeeper",
            value: 12,
            draggable: canDraggable,
            itemStyle: {
              color: bgColor,
            },
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "Hadoop",
            value: 22,
            draggable: canDraggable,
            itemStyle: {
              color: bgColor,
            },
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "Hive",
            value: 42,
            draggable: canDraggable,
            itemStyle: {
              color: bgColor,
            },
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "Spark",
            value: 52,
            draggable: canDraggable,
            itemStyle: {
              color: bgColor,
            },
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "Flink",
            value: 62,
            draggable: canDraggable,
            itemStyle: {
              color: bgColor,
            },
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "Kafka",
            value: 72,
            draggable: canDraggable,
            itemStyle: {
              color: bgColor,
            },
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "sql",
            value: 72,
            draggable: canDraggable,
            itemStyle: {
              color: bgColor,
            },
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "Scala",
            value: 72,
            draggable: canDraggable,
            itemStyle: {
              color: bgColor,
            },
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "Python",
            value: 72,
            draggable: canDraggable,
            // itemStyle: {
            //     color: bgColor
            // },
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "算法",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "爬虫",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "hive",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "数据挖掘",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "可视化",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "数据开发",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "预处理",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "HBase",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "linux",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "Hdfs",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "Mapreduce",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "C++",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "C",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "MongoDB",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "Pandas",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "MLlib",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "socket",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "Airflow",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
          {
            name: "ETL",
            value: 72,
            draggable: canDraggable,
            label: {
              color: colorList[Math.floor(Math.random() * colorListLen)],
              fontSize:
                fontSizeList[Math.floor(Math.random() * fontSizeListLen)],
            },
          },
        ],
      },
    ],
  };
  myCharts.setOption(option);
  window.addEventListener("resize", function () {
    myCharts.resize();
  });
})();

//模块3制作
(function () {
  let yearData = [
    {
      year: "2021", // 年份
      month: [
        "数据挖掘",
        "数据分析",
        "数据算法",
        "数据开发",
        "可视化",
        "python",
      ],
      data: [
        // 两个数组是因为有两条线
        [23900, 21175, 22112, 33197, 23121, 22267],
        [11143, 9131, 8165, 7123, 9178, 12157],
      ],
    },
    // {
    //   year: "2022", // 年份
    //   month: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
    //   data: [
    //     // 两个数组是因为有两条线
    //     [28900, 11175, 32112, 33197, 23121, 32267, 34598, 25421],
    //     [51143, 9131, 8165, 7123, 9178, 15521, 15182, 13564],
    //   ],
    // },
  ];
  // 1. 实例化对象
  let myCharts = echarts.init(document.querySelector(".line5 .chart"));

  // 2.指定配置
  option = {
    //   修改两条线的颜色
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      trigger: "axis",
    },

    // 图例组件
    legend: {
      textStyle: {
        color: "#4c9bfd", // 图例文字颜色
      },
      right: "10%", // 距离右边10%
    },
    // 设置网格样式
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true, // 包含刻度文字在内
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: yearData[0].month,
      axisTick: {
        show: false, // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd", // 文本颜色
      },
      axisLine: {
        show: false, // 去除轴线
      },
      boundaryGap: false, // 去除轴内间距
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false, // 去除刻度线
      },
      //刻度标签颜色
      axisLabel: {
        color: "#4c9bfd", // 文本颜色
      },
      axisLine: {
        show: false, // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a", // 分割线颜色
        },
      },
    },
    series: [
      {
        name: "研究生以上",
        type: "line",
        // 是否带有弧度的线
        smooth: true,
        data: yearData[0].data[0],
      },
      {
        name: "研究所以下",
        type: "line",
        smooth: true,
        data: yearData[0].data[1],
      },
    ],
  };
  // 3.配置实例对象
  myCharts.setOption(option);
  window.addEventListener("resize", function () {
    myCharts.resize();
  });

  // 点击切换效果
  $(".line h2").on("click", "a", function () {
    // console.log($(this).index());
    //点击a之后 根据当前a的索引号 找到相应的 yearData的相关对象
    // console.log(yearData[$(this).index()]);
    let obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    option.xAxis.data[0] = obj.month[0];
    option.xAxis.data[0] = obj.month[0];

    //   xAxis
    //需要重新渲染
    myCharts.setOption(option);
  });
})();
// 图4模块
(function () {
  //   异步加载
  let nOTCh = [];
  let pay = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/notch",
    async: true,
    success: function (datas) {
      for (let i = 0; i < datas.length; i++) {
        nOTCh.push(datas[i].nOTCh);
        pay.push(datas[i].pay);
      }

      console.log(nOTCh);
      console.log(pay);

      let myCharts = echarts.init(document.querySelector(".line6 .chart"));
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "0%",
          textStyle: {
            color: "#4c9bfd",
          },
        },
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12",
        },

        grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "01",
              "02",
              "03",
              "04",
              "05",
              "06",
              "07",
              "08",
              "09",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
              "24",
              "25",
              "26",
              "26",
              "28",
              "29",
              "30",
              "31",
            ],
            // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            // x轴线的颜色
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            // 修改分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "岗位缺口",
            type: "line",
            smooth: true,
            // 单独修改当前线条的样式
            lineStyle: {
              color: "#0184d5",
              width: "2",
            },
            // 填充区域
            areaStyle: {
              // 渐变色
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
                  },
                  {
                    offset: 0.8,
                    color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            // 设置拐点
            Symbol: "circle",
            // 拐点大小
            SymbolSize: 8,
            // 开始不显示拐点，鼠标进过后显示
            showSymbol: false,
            //设置拐点颜色以及边框
            itemStyle: {
              color: "#0184d5",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },

            data: nOTCh,
          },
          {
            name: "岗位薪资",
            type: "line",

            smooth: true,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.4)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#00d887",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,

            data: pay,
          },
        ],
      };
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();

// 图5模块
(function () {
  //   异步加载
  let frequency = [];
  let qualification = [];
  let data1 = [];
  let data2 = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/QuaPost",
    async: true,
    success: function (datas) {
      for (let i = 0; i < datas.length; i++) {
        frequency.push(datas[i].frequency);
        qualification.push(datas[i].qualification);
        data1.push({
          value: frequency[i],
          name: qualification[i],
        });
      }

      let myCharts = echarts.init(document.querySelector(".pie5 .chart"));
      //时间轴数据
      let timelineData = [2022.6, 2022.7];

      let user_data = [
        {
          user_cnt: 4.52,
          age_range: data1,

          gender_range: [
            {
              value: 80,
              name: "统招本科",
            },
            {
              value: 20,
              name: "学历不限",
            },
          ],
        },
        {
          user_cnt: 6.52,
          age_range: [
            {
              value: 254,
              name: "大专",
            },
            {
              value: 2350,
              name: "本科",
            },
            {
              value: 1456,
              name: "硕士研究生",
            },
            {
              value: 241,
              name: "博士研究生",
            },
          ],
          gender_range: [
            {
              value: 90,
              name: "统招本科",
            },
            {
              value: 10,
              name: "学历不限",
            },
          ],
        },
      ];

      let option = {
        baseOption: {
          title: {
            subtext: "",
            x: "center",
            y: "center",
            textStyle: {
              //主标题配置
              color: "#FFCC00",
              fontWeight: "normal",
              fontSize: 16,
            },
            subtextStyle: {
              //子标题配置
            },
          },

          timeline: {
            show: false, //是否显示
            left: 10,
            top: 10,
            right: 600,
            autoPlay: true, //自动播放
            playInterval: 2000, //播放间隔
            axisType: "category",
            inverse: false, //是否反向放置 timeline，反向则首位颠倒过来。
            symbol: "circle",
            symbolSize: 0,
            itemStyle: {
              //轴的图形样式
              normal: {
                color: "#04a5f1",
              },
              emphasis: {
                color: "#04a5f1",
              },
            },
            label: {
              //轴的文本标签样式
              normal: {
                show: true,
                color: "#04a5f1",
              },
              emphasis: {
                color: "#04a5f1",
              },
            },
            lineStyle: {
              //轴线控制
              show: false,
              color: "#ddd",
            },
            checkpointStyle: {
              //当前选择项的样式

              symbolSize: 0,
              //color: '#04a5f1',
              //borderColor: 'rgba(4, 165, 261, .5)'
            },
            controlStyle: {
              //控制按钮样式
              show: false,
            },
            data: timelineData,
          },

          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}:({d}%)",
          },
          series: [
            {
              name: "学历层次",
              type: "pie",
              radius: ["20%", "50%"],
              color: ["#FFCCFF", "#59abe1", "#f4cf42", "#3dc6a8"],
              label: {
                normal: {
                  position: "inner",
                },
              },
            },
            {
              name: "学历比例",
              type: "pie",
              radius: ["54%", "72%"],
              color: [
                "#a0dca0",
                "#60bbb6",
                "#f78db3",
                "#feadac",
                "#fae395",
                "#91d4e5",
                "#8eb3e8",
              ],
              label: {
                normal: {
                  //position: 'inner',
                  formatter: "{b}\n{d}%",
                },
              },
            },
          ],
        },

        options: [
          {
            series: [
              {
                //性别结构
                data: user_data[0].gender_range,
              },
              //年龄结构

              {
                data: user_data[0].age_range,
              },
            ],
          },
          {
            series: [
              {
                //性别结构
                data: user_data[1].gender_range,
              },
              //年龄结构

              {
                data: user_data[1].age_range,
              },
            ],
          },
        ],
      };

      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();
// 图五
(function () {
  //   异步加载
  let pay = [];
  let qualifications = [];
  let qualification = [];
  // 学历薪资
  let collegePay = [];
  let regularPay = [];
  let MasterPay = [];
  let doctoralPay = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/QuaTop",
    async: true,
    success: function (datas) {
      for (let i = 0; i < datas.length; i++) {
        pay.push(datas[i].pay);
        qualifications.push(datas[i].qualification);
      }
      for (let i = 0; i < 5; i++) {
        collegePay.push(pay[15 + i]);
        regularPay.push(pay[10 + i]);
        MasterPay.push(pay[5 + i]);
        doctoralPay.push(pay[i]);
        qualification.push(qualifications[i * 5 - 1]);
        qualification.reverse();
      }

      let myCharts = echarts.init(document.querySelector(".pie6 .chart"));
      let echartsData = {
        title: "title",
        city: ["数据开发", "python", "算法工程师", "架构师", "数据挖掘"],
        legend: ["大专", "本科", "硕士", "博士"],
        data: [collegePay, regularPay, MasterPay, doctoralPay],
      };
      let colors = ["#F56679", "#4C98FB", "#8CDF6C", "#9D50E0"];
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },

        color: colors,
        legend: {
          bottom: -5,
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          padding: [5, 10],
          textStyle: {
            fontSize: 14,
            color: "#96A4F4",
            padding: [3, 0, 0, 0],
          },
          data: echartsData.legend,
        },
        grid: {
          left: "0%",
          right: "4%",
          bottom: "9%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#96A4F4",
            rotate: 0, //倾斜度
          },
          axisLine: {
            lineStyle: {
              color: "#96A4F4",
            },
            width: 5,
          },
          axisTick: {
            show: false,
          },
          data: echartsData.city,
        },
        yAxis: {
          name: "单位：元",
          type: "value",
          axisLabel: {
            color: "#96A4F4",
          },
          axisLine: {
            lineStyle: {
              color: "#96A4F4",
            },
            width: 5,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(150, 164, 244, 0.3)",
            },
          },
        },
        series: [],
      };
      for (let i = 0; i < echartsData.legend.length; i++) {
        option.series.push({
          name: echartsData.legend[i],
          type: "bar",
          stack: "总数",
          barWidth: "45%",
          label: {
            show: false,
            position: "insideRight",
          },
          data: echartsData.data[i],
          itemStyle: {
            normal: {
              label: {
                show: false, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#fff",
                  fontSize: 14,
                  fontWeight: 600,
                },
              },
            },
          },
        });
      }
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();
